<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度平滑收起展开</title>
    <style>

        .table {
            display: table;
            width: 100%;
            width: calc(100% - 30px);
            max-width: 400px;
            margin: auto;
            table-layout: fixed;
            text-align: left;
        }

        .td {
            display: table-cell;
            padding: 5px;
        }

        input[type="checkbox"] {
            position: absolute;
            /*clip: rect(0 0 0 0);*/
        }

        .check-in,
        .check-out {
            color: #34538b;
            cursor: pointer;
        }

        .check-out {
            display: none;
        }

        :checked ~ .check-out {
            display: inline-block;
        }

        :checked ~ .check-in {
            display: none;
        }

        #check1:checked ~ div > .check-out {
            display: inline-block;
        }

        #check1:checked ~ div > .check-in {
            display: none;
        }

        .element {
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s;
        }

        :checked ~ .element {
            max-height: 666px;
        }

    </style>
</head>
<body>
<span style="color: red;">
        注意：选择器:checked 和 ~ 的使用
        <br>
        lable和checkbox在同级和不同级时，注意“收起”/“更多”两个按钮的交互
    </span>
<div class="table">
    <div class="td">
        <input id="check1" type="checkbox">
        <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
        <div class="element">
            <p>
                display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p>
        </div>
        <div>
            <label for="check1" class="check-in">更多↓</label>
            <label for="check1" class="check-out">收起↑</label>
        </div>
    </div>
    <div class="td">
        <input id="check2" type="checkbox">
        <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
        <div class="element">
            <p>
                display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p>
            <p>然而，此方法也有局限性，就是只能实现单行列表的等分，所以，如果我们希望列表数目超过一定值的时候变成多行，就需要根据数目不同，输出不同的DOM结构，仅仅靠CSS有难度。</p>
        </div>
        <label for="check2" class="check-in">更多↓</label>
        <label for="check2" class="check-out">收起↑</label>
    </div>
</div>
</body>
</html>
